<template>
  <view class="all">
    <zero-loading v-if="loading" ></zero-loading>
    <view class="addlea">
      <view class="name-box">
        <text class="name-ts">当前昵称:</text><input class="name"  @change="input"  type="nickname" :value="name" />
      </view>
      <view class="add">
        <input class="value" :value="text" @input="inputtext" placeholder="请输入留言信息" />
        <view class="btn" @click="addleave">留言</view>
      </view>
    </view>
    <scroll-view scroll-y="true" class="leave-list" lower-threshold="150"		@scrolltolower='$noMultipleClicks(getleave,page)'>
    <view class="scroll">
      <view v-for="(item,index) in msgList"  :key="index">
        <msg :data="item"></msg>
      </view>
       </view>
    </scroll-view>
    <view class="bg">
      <view class="bubble">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </view>
      <view class="bubble">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </view>
      <view class="bubble">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </view>
      <view class="bubble">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </view>
      <view class="bubble">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </view>
    </view>


  </view>
</template>

<script>
  import {randomRed} from "../../utils/randomRed.js"
  import {gettoken} from '../../utils/getToken.js'
  
  export default {
    data() {
      return {
        name: "微信用户",
        text: "",
        msgList: [],
        noClick:true,
        token:"",
        loading:false,
        page:0,
        count:9999
      };
    },
    onLoad() {
     
      this.token = uni.getStorageSync('token')|| ''
      this.getleave(this.page)
      if(this.token == '')
      gettoken(this)
     

    },
    methods: {
      input(e){
        if(e.detail.value.replace(/^\s*|\s*$/g,"")){
          return  this.name = e.detail.value
         
        }
        uni.$showMsg("昵称不能为空")
        return  this.name = "微信用户"
      },
      inputtext(e){
        this.text = e.detail.value
      },
      getleave(pg) {
        if(this.count<=this.page){
              return uni.$showMsg("没有更多数据")
            }
            uni.$req.req(this,'getleave',{length:10,page:pg}).then((res)=>{
              let {result} = res
              this.count = result.count.total
              let data = result.data
              this.page += data.affectedDocs
              let temp = data.data.map((item)=>{
              item.color = randomRed()
              return item
            })
              this.msgList = [...this.msgList,...temp]
            })
        
        // uni.$req.req(this, 'getleave').then((res) => {
        //   this.msgList = res.result.data.map((item)=>{
        //     item.color = randomRed()
        //     return item
        // })
        // })
      },
      addleave() {
         this.token = uni.getStorageSync('token')|| ''
         if(!this.text)  return uni.$showMsg("昵称不能为空")
         if(!this.text) return uni.$showMsg('请输入留言信息')
          uni.$req.req(this,'addleave',{'name':this.name,'text':this.text,token:this.token}).then((res)=>{
            let {result} = res
            if(result.code == 1){
              let color = randomRed()
              this.msgList = [{'_id':result.data.id,'name':this.name,'text':this.text,'color':color},...this.msgList]
              uni.showToast({
              	title: '留言成功',
              	//将值设置为 success 或者直接不用写icon这个参数
              	icon: 'success',
              	//显示持续时间为 2秒
              	duration: 2000
              }) 
            }else{
              uni.showModal({
              		title: '提示',
              		showCancel:false,
              		content: result.msg,
              		success: function(res) {
              			uni.$showMsg('取消成功')
              		}
              })
            }

        })
      }




    },
   
    
  }
</script>

<style lang="scss">
  .all {
    position: relative;
  }

  .addlea {
    position: absolute;
    top: 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 750rpx;
    height: 15vh;
    background: linear-gradient(to top, #91eae4, #86a8e7, #7f7fd5);
    box-shadow: 0 2px 1px 3px #86a8e7;

    .name-box {
      padding: 5px;
      display: flex;
      font-size: 16px;

      .name {
        padding-left: 15px;
        font-size: 15px;
        color: #4b4b4b;
        border-bottom: 1px solid #efefef;
      }
    }

    .add {
      display: flex;
      justify-content: space-around;
      align-items: center;

      .value {
        width: 80%;
        margin: 10px;
        border: 2px solid #b0f0e7;
        box-shadow: 0 0 1px #efefef;
        border-radius: 5px;
        padding-left: 5px;
      }

      .btn {
        box-flex: 1;
        margin: 5px;
        white-space: nowrap;
        border: 1px solid #efefef;
        font-size: 14px;
        font-weight: bold;
        color: #ff8bb4;
        background: #fffbd5;
        border-radius: 5px;
        padding: 2px;

      }
    }
  }

  .leave-list {
    background: linear-gradient(to right, rgba(255, 255, 255, .2), rgba(106, 213, 250, .2), rgba(41, 128, 185, .2));
    position: absolute;
    box-sizing: border-box;
    height: 85vh;
    z-index: 10;
    top: 15vh;
    .scroll{
      justify-content: flex-end;
      display: flex;
      flex-direction: column;
    }
  }

  .bg {
    top: 15vh;
    width: calc(750rpx - 60px);
    height: calc(85vh - 60px);
    padding: 30px;
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;

  }

  .bubble {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    box-shadow: inset 0 0 25px rgba (255, 255, 255, 0.25);
    animation: animate_4010 8s ease-in-out infinite;
  }

  .bubble:nth-child(2) {
    position: relative;
    zoom: random();
    animation-delay: -4s;
  }

  .bubble:nth-child(3) {
    position: relative;
    animation-delay: -6s;
    zoom: random();
  }

  .bubble:nth-child(4) {
    position: relative;
    zoom: random();
    animation-delay: -3s;
  }

  .bubble:nth-child(5) {
    position: relative;
    zoom: random();
    animation-delay: -5s;
  }

  @keyframes animate_4010 {

    0%,
    100% {
      transform: translateY(-20px);
      transform: translateX(-10px);
    }

    50% {
      transform: translateY(20px);
      transform: translateX(10px);
    }
  }

  .bubble::before {
    content: '';
    position: absolute;
    top: 50px;
    left: 45px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    z-index: 10;
    filter: blur(2px);
  }

  .bubble::after {
    content: '';
    position: absolute;
    top: 80px;
    left: 80px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    z-index: 10;
    filter: blur(2px);
  }

  .bubble span {
    position: absolute;
    border-radius: 50%;
  }

  .bubble span:nth-child(1) {
    inset: 10px;
    border-left: 15px solid #0fb4ff;
    filter: blur(8px);
  }

  .bubble span:nth-child(2) {
    inset: 10px;
    border-right: 15px solid #ff4484;
    filter: blur(8px);
  }

  .bubble span:nth-child(3) {
    inset: 10px;
    border-top: 15px solid #ffeb3b;
    filter: blur(8px);
  }

  .bubble span:nth-child(4) {
    inset: 30px;
    border-left: 15px solid #ff4484;
    filter: blur(12px);
  }

  .bubble span:nth-child(5) {
    inset: 10px;
    border-bottom: 10px solid #fff;
    filter: blur(8px);
    transform: rotate(330deg);
  }
</style>
